import { Store } from "../../core";

import StoreProps from "./StoreProps";
import useZoom from "./useZoom";
import { decrease } from "./zoomingLevel";
import ZoomOutButton from "./ZoomOutButton";
import { FC, ReactElement } from "react";

export interface RenderZoomOutProps {
  onClick: () => void;
}

type RenderZoomOut = (props: RenderZoomOutProps) => ReactElement;

export interface ZoomOutProps {
  children?: RenderZoomOut;
}

const ZoomOut: FC<{
  children?: RenderZoomOut;
  store: Store<StoreProps>;
}> = ({ children, store }) => {
  const { scale } = useZoom(store);

  const zoomIn = () => {
    const zoom = store.get("zoom");
    if (zoom) {
      const newLevel = decrease(scale);
      zoom(newLevel);
    }
  };

  const defaultChildren = (props: RenderZoomOutProps) => (
    <ZoomOutButton onClick={props.onClick} />
  );
  const render = children || defaultChildren;

  return render({
    onClick: zoomIn,
  });
};

export default ZoomOut;
